<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        display: block;
        border: none;
      }
      #zoomBox {
        position: relative;
        width: 400px;
        border: 1px solid #cecece;
      }
      #midArea {
        width: 400px;
        height: 400px;
      }
      #midArea img {
        width: 400px;
        height: 400px;
      }
      #zoom {
        display: none;
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.3;
        cursor: move;
      }
      #bigArea {
        display: none;
        position: absolute;
        left: 400px;
        top: -1px;
        width: 400px;
        height: 400px;
        border: 1px solid #cecece;
        overflow: hidden;
        z-index: 999;
      }
      #bigArea img {
        position: absolute;
        width: 800px;
        height: 800px;
      }
      #smallArea {
        border-top: 1px solid #cecece;
        padding: 10px;
        height: 50px;
      }
      #smallArea img {
        float: left;
        width: 50px;
        height: 50px;
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <div id="zoomBox">
      <div id="midArea">
        <img src="../img/index.png"  id="Pimg1"/>
        <div id="zoom"></div>
      </div>
      <div id="bigArea">
        <img src="../img/index.png"  id="Pimg2"/>
      </div>
      <div id="smallArea">
        <img src="../img/index.png" id="Pimg3"/>
        <img src="../img/index.png" id="Pimg4"/>
      </div>
    </div>
    <script>
      class Zoom {
        constructor() {
          this.zoomBox = document.getElementById("zoomBox");
          this.midArea = document.getElementById("midArea");
          this.midImg = this.midArea.children[0];
          this.zoom = document.getElementById("zoom");
          this.bigArea = document.getElementById("bigArea");
          this.bigImg = this.bigArea.children[0];
          this.smallArea = document.getElementById("smallArea");
          this.smallImg = this.smallArea.children;
          this.showAndHid();
          this.move();
          this.changeImg();
        }
        showAndHid() {
          this.midArea.onmouseover = () => {
            this.zoom.style.display = "block";
            this.bigArea.style.display = "block";
          };
          this.midArea.onmouseout = () => {
            this.zoom.style.display = "none";
            this.bigArea.style.display = "none";
          };
        }
        move() {
          this.midArea.onmousemove = (e) => {
            let evt = e || event;
            let x =
              evt.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth / 2;
            let y =
              evt.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight / 2;
          
            if (x <= 0) {
              x = 0;
            }
            if (y <= 0) {
              y = 0;
            }
            if (x >= this.midArea.offsetWidth - this.zoom.offsetWidth) {
              x = this.midArea.offsetWidth - this.zoom.offsetWidth;
            }
            if (y >= this.midArea.offsetHeight - this.zoom.offsetHeight) {
              y = this.midArea.offsetHeight - this.zoom.offsetHeight;
            }

            this.zoom.style.left = x + "px";
            this.zoom.style.top = y + "px";

            let bl = this.midArea.offsetWidth / this.zoom.offsetWidth;

            this.bigImg.style.left = -this.zoom.offsetLeft * bl + "px";
            this.bigImg.style.top = -this.zoom.offsetTop * bl + "px";
            
          };
        }
        changeImg() {
          for (let i = 0; i < this.smallImg.length; i++) {
            this.smallImg[i].onclick = () => {
              this.midImg.src = this.bigImg.src = this.smallImg[i].src;
            };
          }
        }
      }
      let zoom = new Zoom();
    </script>
  </body>
</html>
